<template>
    <div class="subject">
        <p class="subject-content">
            {{ code + 1 }}. {{ this.subject.content }}
            &nbsp;&nbsp;&nbsp;<span v-if="isUse">答案:&nbsp;{{ answers.toString()
            }}</span>
        </p>
        <el-checkbox-group v-model="answers">
            <el-checkbox v-for="(element,index) in subject.options" :key="index" :label="index" :disabled="isUse">
                {{ element }}
            </el-checkbox>
        </el-checkbox-group>
    </div>
</template>

<script>
export default {
    name: "MultipleChoiceSubject",
    created() {
        this.subject = this.inSubject;
        // window.addEventListener("storage", this.initComponent,false);
        this.answers = this.subject.answer;
        
    },
    beforeDestroy() {
        // window.removeEventListener("storage", this.initComponent,false);
    },
    props: {
        inSubject: {
            type: []
        },
        code: {
            default: 0
        },
        isUse: {
            default: true
        }
    },
    data() {
        return {
            subject: {
                type: 1,
                answer: ["D", "A"],
                options: {
                    A: "气愤",
                    B: "冷漠",
                    C: "快乐",
                    D: "悲伤"
                },
                content: "幸福的反义词是什么?"
            },
            answers: []
        };
    }
};
</script>

<style scoped lang="scss">
    .subject-content {
        margin: 10px 0;
    }
    
    .subject {
        margin-left: 20px;
        
        .flex-box {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-content: center;
            flex-flow: column;
            padding-left: 20px;
            
            p.content {
                display: inline-block;
                width: max-content;
                overflow-wrap: break-word;
                overflow: hidden;
                font-size: medium;
            }
        }
    }
</style>